<template>
	<view class="washPro">
		<view class="nav">
			<view class="nav-header">
				<!-- 搜索栏 -->
				<uni-search-bar class="nav-header-mt" radius="100" placeholder="请输入要搜索的内容" clearButton="none"
					cancelButton="none" @confirm="search" />
				<view class="nav-header-content">
					<text class="uni-test-1">历史记录：</text>
					<text class="uni-test-2">坤坤洗脚店</text>
				</view>
			</view>
			<view class="tab-blank"></view>
		</view>
		<view class="content-box">
			<!-- 使用 v-for 循环生成八个 show 视图 -->
			<view class="show" v-for="index in 8" :key="index"> 
			<view @click="toStoreDetail">
				<view class="show-nav">
					<view class="show-nav-h1">爱坤洗脚房</view>
					<view class="show-nav-text">556m</view>
				</view>
				<view class="show-comments">
					<uni-rate class="show-comments-xx" size="12" :readonly="true" :value="storeScore" />
					<view class="show-comments-stor">{{storeScore}}分</view>
					<view class="show-comments-text"> 销量：</view>
					<view class="show-comments-text">556</view>
				</view>
				<view class="show-img">
					<image src="/static/weixiu/uni.png"></image>
					<view class="show-img-text-container">
						<view class="show-img-text">营业时间：周一至周五</view>
						<view class="show-img-text">早上8:00-晚上22:00</view>
						<view class="show-img-text">上阳区人民路与解放路交叉口</view>
					</view>
				</view>
			</view>
			
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeScore: 4, // 店铺评分
			}
		},
		methods: {
			search() {
				// 搜索功能的实现
			},
			toStoreDetail(){
				uni.navigateTo({
					url:"/pages/maintenance/nearStore/storeDetail/storeDetail"
				})
			}
		}
	}
</script>

<style>
	.washPro {
		height: auto; /* 整体高度自适应 */
	}

	.nav-header {
		width: 100%;
		height: 100px; /* 导航栏高度 */
		background-color: #1E90FF; /* 导航栏背景色 */
		position: fixed; /* 固定定位 */
		top: 1;
		left: 0;
		right: 0;
		z-index: 1000; /* 层级 */
	}

	.tab-blank {
		width: 100%;
		height: 130px; /* 空白区域高度 */
		position: fixed;
		top: 100; /* 距离顶部的距离 */
		right: 0;
		background-color: #1E90FF; /* 空白区域背景色 */
		z-index: 1; /* 层级 */
	}

	.nav-header-content {
		padding: 0 7%; /* 内边距 */
		font-size: 12px; /* 字体大小 */
		color: #F7F7F7; /* 字体颜色 */
	}

	.uni-test-1 {
		font-size: 13px; /* 历史记录字体大小 */
	}

	.uni-test-2 {
		padding-left: 5px; /* 历史记录回显的左边距 */
	}

.content-box {
		display: flex; /* 弹性盒子布局 */
		flex-direction: column; /* 垂直排列 */
		justify-content: flex-start; /* 从顶部开始排列 */
		margin: 0 22px 0 10px; /* 外边距 */
	}

	.show {
		width: 95%; /* 显示区域宽度 */
		background-color: #fff; /* 背景颜色 */
		margin: 10px auto; /* 上下外边距，水平居中 */
		z-index: 2; /* 层级 */
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		border-radius: 10px; /* 圆角效果 */
		padding: 15px; /* 内边距 */
	}
	.show:nth-child(1){
		margin-top: 100px; /* 向下移动20px */
	}

	.show-nav {
		display: flex; /* 弹性盒子布局 */
		justify-content: space-between; /* 两端对齐 */
		align-items: center; /* 垂直居中 */
		
	}

	.show-nav-h1 {
		font-size: 18px; /* 店名字体大小 */
		font-weight: 900; /* 字体加粗 */
	}

	.show-nav-text {
		color: #1E90FF; /* 距离字体颜色 */
		font-size: 10px; /* 字体大小 */
		font-weight: 900; /* 字体加粗 */
	}

	.show-comments {
		display: flex; /* 弹性盒子布局 */
		align-items: center; /* 垂直居中 */
		margin-top: 1px; /* 上边距 */
		font-size: 10px; /* 字体大小 */
	}

	.show-comments-xx {
		margin-right: 4px; /* 星星右边距 */
	}

	.show-comments-stor {
		margin-right: 18px; /* 评分右边距 */
	}

	.show-img {
		display: flex; /* 弹性盒子布局 */
		align-items: center; /* 垂直居中 */
		margin-top: 5px; /* 上边距 */
	}

	.show-img > image {
		width: 110px; /* 图片宽度 */
		height: 70px; /* 图片高度 */
		border-radius: 10px; /* 圆角 */
	}

	.show-img-text-container {
		display: flex; /* 弹性盒子布局 */
		flex-direction: column; /* 垂直排列 */
	}

	.show-img-text {
		font-size: 11px; /* 文本字体大小 */
		margin: 0 0 1px 8px; /* 上下2px边距 */
		color: #666; /* 文本颜色 */
	}
</style>